第二章 超文本标记语言概述
超文本标记语言概述
一、HTML的定义
超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
在WWW上的一个超媒体文档称之为一个页面(page)。作为一个组织或个人在万维网上开始点的页面称为主页Homepage,或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。
Web页面也就是通常所说的网页,在本书中不作区分。
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。所谓超级链接,就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如:脚本语言、CGI、组件等),可以创造出功能强大的网页。因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
二、HTML文件的整体结构
一个网页对应于一个HTML文件,HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。
标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。
1)和双标记符
标记符说明该文件是用HTML来描述的。它是文件的开头,而则表示该文件的结尾,它们是HTML文件的始标记和尾标记。
2)
和头部标记符这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。头部中最常用的标记符是标题标记符
3)
和正文标记符网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
一个不包含任何内容的基本网页文件如下所示:
当然,如果不使用以上基本框架结构,而直接使用在实体部分中出现的标记符,在浏览器下也可以解释执行。
=三、正文标记的使用
每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。正文标记符
中提供以下属性来改变文本的颜色及页面背景。例如:
标记将定义页面的背景色为黑色,正文字体显示为白色。以上属性使用中,需要对颜色进行说明,在HTML中对颜色可使用2种方法说明颜色属性值,即颜色名称(英文名)和颜色值。其中颜色值用6个十六进制数来分别描述红、绿、蓝三原色的配方法——称为RGB值,每2个十六进制数表示一种颜色。使用颜色值时,应在值前冠以“#”号。
使用图案代替背景颜色,可以使页面更生动、美观。例如:
。可将图像文件image.gif所表示的一幅图像作为页面的背景,若图像幅面不够大,将会将图像重复平铺在窗口中。
四、HTML字符集
在网页中除了可显示常见的ASCII字符和汉字外,HTML还有许多特殊字符,它们一起构成了HTML字符集。有2种情况需要使用特殊字符,一是网页中有其特殊意义的字符,如:< 和 >;二是键盘上没有的字符。
HTML字符可以用一些代码来表示,代码可以有2种表示方式。即字符代码(命名实体)和数字代码(编号实体)。字符代码以&符开始,以分号结束,其间是字符名;数字代码也以&符开始,以分号结束,其间是#号加编号。
五、HTML的有关约定
在编辑HTML文件和使用有关标记符时有一些约定或默认的要求。
(1) 文本标记语言源程序的文件扩展名默认使用htm或html。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
(2) HTML源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(
标记指定除外);对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号“ ;”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。(3) 标记符中的标记元素用尖括号括起来,如:、,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即与作用相同;许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。
(4) 标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。
(5) HTML注释由惊叹号表示,注释内容由符结束。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。
HTML正文字体
在制作网页时,常要为字符设置不同的显示格式(如:字体、字型、字号等)。
一、物理字符标记符
二、逻辑字符样式
逻辑字符样式不但可以指定文本格式,还能反映文本的含义。
三、标题标记符
标题标记符用于在显示的正文中表示不同级别的标题,其中n为1~6的数字,
表示最大号的标题,
表示最小号的标题。标题标记符应成对使用。浏览器在解释标题标记符时,会自动改变文本的大小,同时换行并添加一定的行距。
四、字号标记符
字号标记符用于显示不同的字号,带有3个常用的属性,即SIZE、COLOR和FACE。为结尾标记符,应注意成对使用。
SIZE为字号属性,用于控制文字的大小,设定的值越大,显示的文字越大,其值的绝对值为1~7。也可以用+或者负号来说明相对值。例如SIZE=+1表示设定值比当前值大1号。一般3号为默认值。例如READ
COLOR属性可用于改变文字的颜色。例如RED可将和之间的文字显示为红色。
FACE属性则用来指定文体样式。如“times New Roman ”字体、“Arial”字体、“宋体”“楷体”等。在FACE属性中可同时指定几种字体,浏览器解释时优先使用列在前面的字体,如系统中没有前面的字体,便采用后一种字体。
正文布局
在正文布局中主要讨论段落、引文、预格式化和列表文本的处理等问题。
一、段落格式
1)段落标记符
标记符指出一个新段落的开始,其后内容从新的一行开始,并与上段之间有一个空行。它可以有位置对齐属性ALIGN。
2)换行标志
单标记符用于使文本从新的一行显示,注意它不象会产生一个空行,但连续多个的
可以产生多个空行的效果。3)水平线标记符
单标记符
用于产生一条水平线,以分隔文档的不同部分。可以给
标记符设置一些属性,以设定其位置,改变其长短、粗细等特征。其属性有ALIGN、SIZE、WIDTH、NOSHADE和COLOR等。ALIGN属性用来定义水平线的对齐方式,默认为center ,表示居中。此外可定义为left和right。
和
标记符的ALIGN属性也取这3个值,但默认值为left。 SIZE属性用于定义水平线的粗细,其值为一整数,取象素(prixel)值,默认值为2。
WIDTH属性用于定义水平线的长度。长度值可以取绝对值或相对值。绝对值即象素值,相对值取百分数(如80 %)。用象素值时,水平线的长度将不会随显示窗口的变化而变化,而用百分数时水平线的长度将随窗口宽度的大小变化而变长或变短。
NOSHADE属性则使水平线为一条黑线,不使用该属性时将默认产生一条加阴影的三维立体线条。
例如:若要产生一条居中显示,粗细为5,长度占窗口宽度60%的实心红色水平线,则HTML标记为:
。4)段落对齐标记符
段落对齐标记符有
和 。双标记符可使在 和 之间的内容居中显示。双标记符用于文档分节,以便为文档的不同部分应用不同的段落格式,标记符要使用属性ALIGN来控制段落对齐格式。其属性值为right、center、justify(两端对齐)。在说明段落对齐时,可能会出现多种标记说明嵌套的情况。当不同格式设置作用于同一内容时。若所设置的格式是相容的,则采取叠加效果,如同时设置了粗体和斜体,则叠加效果为粗斜体;若所设置的格式是相冲突的,则取最靠近的标记说明。
二、预格式化标记符
双标记符
和可以使显示效果完全按照源文件中编排的格式输出。只要将预先编排好格式的信息安排在该双标记符之间即可实现。这时用户打入的回车、换行、空格等符号在显示时将完全起作用。三、引文标记符
引文双标记符
和可用于建立一个引文,引文常值于一段较长文本之前,显示时会将引文文字自动右移缩格,左右各空出几个空格,以示区别。四、列表格式
列表显示文字可使信息显示更清楚有序,在HTML中有3种常用的列表格式,即有序表、无序表和定义式列表。
1) 有序列表
有序列表使用双标记符< OL >和< /OL >,表项使用
和 ,其语法格式如下:
- 表项1
- 表项2
有序列表在显示时使每个表项占一行,并在表项前自动加上顺序编号。
标记符的编号可由属性TYPE和START来改变。TYPE表示编号的类型,START表示序号从何开始。TYPE=1表示序号为阿拉伯数字(默认值),TYPE=A表示序号为大写字母,TYPE=a表示序号为小写字母,TYPE=I表示序号为大写的罗马数字,TYPE=i表示序号为小写罗马数字。
当位于
标记符说明中时,
- 标记符有2个常用属性,TYPE和VALUE。TYPE用于设置数字样式,取值与
的TYPE相同,VALUE属性用于指定一个新的数字序列起始值,以获得非连续性数字序列,如下例:
才
2)无序列表
无序列表使用双标记符
和
标记符。标记符的属性项TYPE取值为disc(实心圆)、circle (空心圆)和square(方块)。这些圆和方块作为列表项目前的项目符号。
有序表和无序表本身可以嵌套列表,2种列表也可以相互混合嵌套。下列HTML代码为混合列表的嵌套示例,显示效果如图4.3.2所示:
混合嵌套列表 混合嵌套列表:
- 列表项1
- 子列表项1
- 子列表项2
- 列表项2
- 子列表项1
- 子列表项2
- 列表项3
- 子列表项1
- 子列表项2
插入图像
一、插入图像标记
用于表示在网页某位置插入一个图像。图像来自它指定的某一图像文件。它具有2个基本属性:SRC和ALT。
SRC属性用于指定图像文件的URL;
ALT则是对图像简要说明的文字。
当图像不能显示时,则在指定的图像位置显示ALT所定义的文字。另外,当鼠标移到图像上时,通常也会显示ALT属性的内容文字(延续约几秒钟)。
二、图像布局
标记符中还可使用其他属性用于控制图像的尺寸、位置等布局。
1) 指定图像的高和宽
WIDTH和HEIGHT属性分别用于指定图像的高度和宽度,其值可为象素,也可取百分比。当浏览器解释执行时,在实际下载图像文件之前会按指定尺寸预留出空间。以便预先安排好页面布局。从而加快网页展示的速度。
2) 添加边框
用BORDER属性可以给图像添加边框,边框宽度的单位是象素。BORDER=0 表示无边框,省略该属性也表示无边框。
3) 图像与文字对齐方式?
当图像与文字混排时,可使用ALIGN属性说明文字与图像的对齐方式,ALIGN的值可以是top表示顶部对齐、middle表示中央对齐、bottom表示底部对齐(默认值)、left表示图像居左、right表示图像居右。
4) 设置图像与文本之间的空白?
属性HSPACE和VSPACE可用来设置图像和文本(或图像与图像)之间水平方向和垂直方向的空白象素点。
以下的HTML代码说明图片使用的实例
插入图像示例 下面插入一个图像,如果浏览器不能显示该图像,或找不到图像文件时,
将显示"this is the windows logo"字样:
下面插入一个图像
下面插入同一个图像,但尺寸变大创建超级链接
一、URL与
标记符 1) URL
URL称为统一资源定位器(Universal Resource Locator),用于定位WWW上的文档位置。一个URL 通常包含3部分:协议、服务器地址、文件地址和文件名。
协议表明应使用何种方法获取信息,常用协议有http(超文本传输协议)、ftp(文件传输协议)、mailto(电子邮件协议)、news(新闻组协议)、telnet(远程登录协议)等。计算机及其服务器地址通常使用域名地址,也可使用IP地址。在URL中使用斜杠“/”来分隔目录,如果是在主机根目录下寻找首页,则文件名常常省略,通常的默认文件名是index.html或default.html。
2)绝对URL与相对URL
绝对URL是指一个包括协议名、域名和包含路径的文档名的完整地址。例如:https://www.360docs.net/doc/ee1326942.html, 就表示一个绝对URL。
相对URL是指相对于当前页面的地址,通常是指从当前页面指向的主机目录开始的路径。例如:image_file/example.gif就是一个相对URL,它表示当前目录下的image_file目录下的example文件。用户在制作自己的网页时,通常使用的是相对URL。如果所访问的文档都在本地计算机(自己的计算机)上,则WWW在访问时使用file协议。如:file://D:/example/index.html。
3)
标记符 与中使用,用于定义一个URL基准的地址头,这样在网页中出现的相对URL则自动使用该基准地址,以组合为一个引用地址。
标记符在头部标记符 例如:
。 二、建立超级链接
建立超级链接使用标记和并使用属性HREF。根据超链所指向的地点不同,可分为指向本地网页的链接、指向其他网站网页的链接、指向本页面中特定部分的链接和指向Email地址的链接。
1)指向本地网页的链接
指向本地网页是指在同一台计算机上进行链接时的情况。这时只要使用相对URL即可。在标记符中的HREF属性中定义该地址,然后在和双标记符之间用文字或插入图片的方式说明在该处有一个超级链接的节点。当文字被作为节点时,默认情况下,该文字被显示为蓝色并带下划线。若将鼠标指向该文字或图片时,鼠标会变成一个手指形状,点击鼠标左键、则可激活该URL,此时在浏览器窗口左下方的状态栏中会显示出该URL。例如:
2) 指向其他网页的链接
如果超链是指向另外主页上的网页,则应使用绝对URL。例如:
3)指向页面中特定部分的链接
对于一个较长的页面,往往在一个窗口中不能全部显示,这可以使用指向页内的超级链接进行跳转,首先应在页面中特定部分设置一个目标点——锚点。然后再设置超级链接节点。设置锚点使用标记符的NAME属性。例如:第四章
设置了锚点之后,就可以用标记符的HREF属性指向该位置。例如:
当用户在显示的页面中点击链接文字“第四章超文本标记语言”时,则窗口将显示标记有“第四章”锚点开始的页面。注意到,对于锚点的应用需使用符号“#”。
如果在另外主机中的某页面的某处也设置了锚点,则在超级链接使用时,也可以直接指向该锚点处显示,例如:
4)指向电子邮件的链接
当用户在页面上单击“单击此处与作者联系”超链节点的文字后,系统将自动启动邮件客户程序(例如 Outlook Express),并将设定的邮箱地址(例如chen538@https://www.360docs.net/doc/ee1326942.html,)填入至“收件人”栏中,用户即可编辑并发送邮件了。
表格制作
一、创建表格
在HTML中可使用
、
、 、 、 等标记符来创建和设计表格。 1)
标记符
双标记符
和
用于定义表格,一个表格的所有内容都放在这2个标记符之间。它具有多个属性,具体内容在后面述叙。2)创建表格标题
双标记符
和 用于建立表格的标题,并使用ALIGN属性定义标题的位置。ALIGN 位置属性有4个值,即top(标题放在表格的上方)、bottom(标题放在表格的下方)、left(标题放在表格的左上方)、right(标题放在表格的右上方)。一个表格只能有一个标题。例如:
颜色与颜色值对应表 ,表示将表格标题放在表格的下面且居中。3)建立表头?
表头是表格中行或列的标题,即表项的名称。使用
可以在表的第一行或第一列加表头,表头内容写在 和 之间,显示时将采用粗体字以醒目。在表格的第一行加表头的格式为:
表头1 表头2 表头3 在表格的第一列加表头的格式为:
表头1 表项1 表项2 表项3 4)表格行与列的定义
表格的内容是由行定义标记符
和 以及列定义标记符与 来确定的。可以省略,即一个新的开始,表示前一个 的结束。一般的也可以省略。 在
、 、 标记符中可使用ROWSPAN和COLSPAN属性对行、列合并。 例如:
表项1 表示在纵向上合并3行;而标记符表项2 表示在水平方向上合并的列数。利用这一功能可制作出较为复杂的多层表头的表格。下面的HTML代码产生一个具有多层表头的表格。
跨行跨列的表格例 平均 其他 类号
性能 数据1 数据2 MAX MIN 甲种(高级) 1.9 0.03 0.34 3.3 0.3 乙种 1.7 8 66 89 88 总之,构造表格时,每个
标记符产生一行,表格有多少行就应有多少个 标记符;表格的列数则由 或 的个数而定;若表的单元格中无任何内容,则使用无内容的 或 标记符即可。 二、表格的修饰
1)表格边框和分隔线
在
标记符内使用FRAME、RULES、BORDER属性可以设置表格的边框和单元格分隔线。
FRAME属性用于控制是否显示边框以及如何显示边框,其值可以是void(默认值无边框)、above(只有顶框)、below(只有底框)、hsides(只有顶框和底框)、vsides(只有左右侧框)、lhs(只有左侧框)、rhs(只有右侧框)、box(包含4个边框)。
ROLES属性用于控制单元格之间的分隔线,其值可以是:none(无分隔线)、groups(只在行组和列组间有分隔线)、rows(仅有行分隔线)、cols(仅有列分隔线)、all(具有所有分隔线)。none为默认值。
BORDER属性用于设置边框线的宽度。若BORDER="0",则表示无边框,无分隔线;若取其他值,则意味着包含所有边框和分隔线。若使用
,相当于为BORDER设置了非零值。
2)表格的对齐
表格的对齐指表格在页面中的对齐方式。
表格在页面中的对齐可在
标记符中使用ALIGN属性,其取值可有left、centen和right。默认值为left、即为页面中左对齐。当表格与文字混合编排时,则文件中安排在表格后面的文字会显示在表格的右边或左边,形成文字与表格环绕的效果。
3)单元格中内容的对齐
单元格内容的对齐包括数据项在水平方向上的对齐和在垂直方向上的对齐。设置数据水平方向对齐是在表格内容标记符
、 、 中使用ALIGN属性。其取值可以是center、left、right、justify (两端对齐)、char(按特定字体对齐)。默认为左对齐。 垂直对齐则是使用VALIGN属性,其取值为top(单元格顶部)、bottom(单元格底部)、middle(垂直方向的中部)、baseline(同行单元格一致)。默认值为居中(middle)对齐。
4)单元格之间的间隔
在
标记符中可使用CELLSPACING属性来调节单元格之间的间隔;使用CELLPADDING属性来调节表格分隔线和数据(即数据与单元格边线)之间的间隔。它们的属性项取值为象素值。
三、使用表格设计页面布局
HTML中有多种安排页面内容、设计页面布局的方法,运用表格就是方法之一。如果将整个窗口或整个显示的页面定义为一个表格,但隐去表格线,则在每个单元格中可以安排不同的内容(文本或图像)、甚至设置不同的背景,这样便可获得特殊的页面布局。
1)用色块进行页面布局?
在标记符
、
、 内使用BGCOLOR属性可设置单元格的背景色;使用BACKGROUND属性可设置背景图案。例如: 可使表格背景为灰色,而 则可使某单元格为黄色。通过大的色块分割,可使整个页面窗口分为几个明显的部分,以使信息归类组织,即醒目又有序。 2)用表格嵌套实现页面布局?
将表格作为一个单元格的内容,安排在
和 标记符之间,即可实现表格的嵌套的页面布局。以下代码使用了表格嵌套的方法和不同色块方法构造页面布局。
align="center">
第一框(单元格)内的数据
第一部分数据 第二部分数据 align="center">
第三框(单元格)内的数据
第四框(单元格)内的数据
框架技术
一、框架的概念
框架(frame)亦称为“帧”的技术,可以获得在同一个窗口中开辟几个子窗口以便同时显示几个不同页面的效果。要使用框架,首先要了解框架集的概念。
框架集是构造整个框架结构的文档,它不包含具体显示的文本和图像,而只包含如何组织安排各个
框架位置、大小和初始页面信息的设计。它是框架使用中最基础的文档,常称之为整个框架显示时的主文档。框架集的基本格式如下:
…………注意到,框架组文档中,用